<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/css/base.css">
    <script src="static/js/jquery.js"></script>
    <script src="static/js/ajax.js"></script>
    <script src="static/layui/layui.js"></script>
</head>
<body>
<form id="editForm" class="layui-form" style="margin: 10px">
    <input type="hidden" name="id" id="id">
    <div id="applyDiv">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span class="red">*</span>用车时间</label>
                <div class="layui-inline" id="rangeLinked">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" name="startTime" id="startTime" class="layui-input"
                               lay-reqtext="请选择用车时间"
                               lay-verify="required"
                               placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" name="endTime" id="endTime" class="layui-input"
                               lay-reqtext="请选择用车时间"
                               lay-verify="required"
                               placeholder="结束日期">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" for="applyCarId">申请车辆</label>
                <div class="layui-input-inline">
                    <select name="applyCarId" id="applyCarId" lay-search>
                        <option value="">[任意车辆]</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" for="applyDriver">是否自驾</label>
                <div class="layui-input-inline">
                    <select name="applyDriver" id="applyDriver" lay-filter="applyDriver">
                        <option value="1">自驾</option>
                        <option value="2">指派</option>
                    </select>
                </div>
                <div class="layui-input-inline" id="driverDiv" style="display: none">
                    <select name="applyDriverId" id="applyDriverId" lay-search>
                        <option value="">[任意司机]</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" for="content">用车事由</label>
                <div class="layui-input-inline">
            <textarea class="layui-textarea" name="content" id="content"
                      placeholder="请输入用车事由"></textarea>
                </div>
            </div>
        </div>
        <div id="applyBtnDiv" class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-filter="submitBtn" lay-submit>提交</button>
            </div>
        </div>
    </div>
    <div id="depExamDiv">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" for="depContent">负责人意见</label>
                <div class="layui-input-inline">
            <textarea class="layui-textarea" name="depContent" id="depContent"
                      placeholder="请输入审核意见"></textarea>
                </div>
            </div>
        </div>
        <div id="depExamStatusDiv" class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" for="depContent">负责人审核</label>
                <div class="layui-input-inline">
                    <button type="button" id="applyStatus_3" class="exam-btn layui-btn">同意</button>
                    <button type="button" id="applyStatus_2" class="exam-btn layui-btn layui-bg-red">拒绝</button>
                    <button type="button" id="depExam" class="exam-btn layui-btn layui-bg-orange">未审核</button>
                </div>
            </div>
        </div>
        <div id="depExamBtnDiv" class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" data-apply-status="3" lay-filter="applyStatus" lay-submit>同意
                </button>
                <button type="submit" class="layui-btn layui-bg-red" lay-filter="applyStatus" data-apply-status="2"
                        lay-submit>拒绝
                </button>
            </div>
        </div>
    </div>
    <div id="admExamDiv">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" for="admExamContent">管理员意见</label>
                <div class="layui-input-inline">
            <textarea class="layui-textarea" name="admExamContent" id="admExamContent"
                      placeholder="请输入审核意见"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" for="carId">指派车辆</label>
                <div class="layui-input-inline">
                    <select name="carId" id="carId" lay-search>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" id="driverIdDiv">
            <div class="layui-inline">
                <label class="layui-form-label" for="driverId">指派司机</label>
                <div class="layui-input-inline">
                    <select name="driverId" id="driverId" lay-search>
                    </select>
                </div>
            </div>
        </div>
        <div id="admExamStatusDiv" class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" for="admExamContent">管理员审核</label>
                <div class="layui-input-inline">
                    <button type="button" id="applyStatus_5" class="exam-btn layui-btn">同意</button>
                    <button type="button" id="applyStatus_4" class="exam-btn layui-btn layui-bg-red">拒绝</button>
                    <button type="button" id="admExam" class="exam-btn layui-btn layui-bg-orange">未审核</button>
                </div>
            </div>
        </div>
        <div id="admExamBtnDiv" class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" data-apply-status="5" lay-filter="applyStatus" lay-submit>同意
                </button>
                <button type="submit" class="layui-btn layui-bg-red" data-apply-status="4" lay-filter="applyStatus"
                        lay-submit>拒绝
                </button>
            </div>
        </div>
        <div id="returnDiv" class="layui-form-item">
            <label class="layui-form-label">车辆状态</label>
            <div class="layui-input-block">
                <button type="button" id="returnCar" class="exam-btn layui-btn">已还车
                </button>
                <button type="button" id="browCar" class="exam-btn layui-btn layui-bg-orange">未还车
                </button>
            </div>
        </div>
    </div>
</form>
</body>
<script>
    const id = location.hash.substring(location.hash.indexOf("=") + 1);
    const {form, laydate} = layui;
    const type = "${type}";

    function formatDiv() {
        $("#depExamStatusDiv").hide();
        $("#admExamStatusDiv").hide();
        $("#returnDiv").hide();
        $(".exam-btn").hide();
        switch (type) {
            case "apply":
            case "edit":
                $("#depExamDiv").hide();
                $("#admExamDiv").hide();
                break;
            case "depExam":
                $("#admExamDiv").hide();
                $("#applyDiv input,#applyDiv textarea,#applyDiv select").prop('disabled', 'true');
                $("#applyBtnDiv").hide();
                break;
            case "admExam":
                $("#applyDiv input,#applyDiv textarea,#applyDiv select").prop('disabled', 'true');
                $("#depExamDiv textarea").prop('disabled', 'true');
                $("#applyBtnDiv").hide();
                $("#depExamBtnDiv").hide();
                $("#depExamStatusDiv").show();
                break;
            case "detail":
                $("#applyBtnDiv").hide();
                $("#depExamBtnDiv").hide();
                $("#admExamBtnDiv").hide();
                $("#depExamStatusDiv").show();
                $("#admExamStatusDiv").show();
                $("input,select,textarea").prop("disabled", 'true');
                break;
        }
        form.render();
    }

    $(function () {
        getCarSelect('applyCarId')
        getDriverSelect('applyDriverId')
        formatDiv();
        if (id) {
            ajax.get('apply/' + id).then(data => {
                $("#id").val(id);
                $("#startTime").val(data.startTime);
                $("#endTime").val(data.endTime);
                if (data.applyDriver == 2) {
                    $("#driverDiv").show()
                } else {
                    $("#driverDiv").hide()
                }
                $("#applyDriverId").val(data.applyDriverId);
                $("#content").val(data.content)
                $("#depContent").val(data.depContent);
                $("#admExamContent").val(data.admExamContent);

                const applyStatus = data.applyStatus;

                switch (applyStatus) {
                    case 1:
                        $("#depExam").show();
                        $("#admExam").show();
                        break;
                    case 2:
                        $("#applyStatus_2").show();
                        $("#admExam").show();
                        break;
                    case 3:
                        $("#applyStatus_3").show();
                        $("#admExam").show();
                        break;
                    case 4:
                        $("#applyStatus_3").show();
                        $("#applyStatus_4").show();
                        break;
                    case 5:
                        $("#applyStatus_3").show();
                        $("#applyStatus_5").show();
                        $("#returnDiv").show();
                        $("#browCar").show();
                        break;
                    case 6:
                        $("#applyStatus_3").show();
                        $("#applyStatus_5").show();
                        $("#returnDiv").show();
                        $("#returnCar").show();
                        break;
                    default:
                        $("#depExam").text("流程异常！");
                        $("#admExam").text("流程异常！");
                        break;
                }
                if (data.applyDriver == 1) {
                    $("#driverIdDiv").hide();
                } else {
                    $("#driverIdDiv").show();
                }


                getCarSelect('applyCarId', data.applyCarId);
                getCarSelect('carId', data.carId || data.applyCarId);
                getDriverSelect('applyDriverId', data.applyDriverId);
                getDriverSelect('driverId', data.driverId || data.applyDriverId);
                form.render();
                laydate.render();
                formatDiv();
            })
        }
        laydate.render({
            elem: '#rangeLinked',
            range: ['#startTime', '#endTime'],
            rangeLinked: true,
            type: "datetime"
        });
        form.on("select(applyDriver)", function (data) {
            $("#applyDriverId").val("");
            if (data.value == 2) {
                $("#driverDiv").show();
            } else {
                $("#driverDiv").hide();
            }
        });
        form.on("submit(submitBtn)", function (data) {
            let url = 'apply/save'
            if (id) {
                url = "apply/update"
            }
            saveOrUpdate(url, data.field)
            return false;
        })

        form.on("submit(applyStatus)", function (data) {
            const applyStatus = $(data.elem).data("applyStatus");
            let {id, depContent, admExamContent} = data.field;
            let carId, driverId;
            if (applyStatus == 2) {
                depContent = depContent || "拒绝"
            }
            if (applyStatus == 3) {
                depContent = depContent || "同意"
            }
            if (applyStatus == 4) {
                admExamContent = admExamContent || "拒绝"
            }
            if (applyStatus == 5) {
                admExamContent = admExamContent || "同意"
                carId = data.field.carId
                driverId = data.field.driverId
            }

            saveOrUpdate('apply/exam', {id, applyStatus, depContent, admExamContent, carId, driverId});
            return false;
        })
    })

    function saveOrUpdate(url, data) {
        ajax.post(url, data).then(() => {
            layer.alert(`操作成功！`, {icon: 6}, function () {
                if (id) {
                    const index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);
                    parent.reloadTable();
                } else {
                    location.reload()
                }

            })
        })
    }


    function getCarSelect(id, value) {
        ajax.get('car/select').then(data => {
            for (let car of data) {
                $("#" + id).append(`<option value="\${car.id}">\${car.carNo}</option>`)
            }
            $("#" + id).val(value);
            form.render();
        })
    }

    function getDriverSelect(id, value) {
        ajax.get('userinfo/driver/select').then(data => {
            for (let driver of data) {
                $("#" + id).append(`<option value="\${driver.id}">\${driver.nickname}</option>`)
            }
            $("#" + id).val(value);
            form.render();
        })
    }
</script>
</html>

